<template>
  <div>
    <div class="head">
      <div class="top" >
        <span>{{seller.name}}</span>
        <div>
          <img src="./img/star36_on@2x.png" alt="">
          <img src="./img/star36_on@2x.png" alt="">
          <img src="./img/star36_on@2x.png" alt="">
          <img src="./img/star36_on@2x.png" alt="">
          <img src="./img/star36_on@2x.png" alt="">
          <span>（661）</span>
          <span>月售690单</span>
        </div>
        <div>
          <i class="iconfont icon-ziyuan"></i>
          <span>已收藏</span>
        </div>
      </div>
      <div class="bottom">
        <div>
          <span>起送价</span>
          <span>{{seller.minPrice}}</span>
          <span>元</span>
        </div>
        <div>
          <span>商家配送费</span>
          <span>{{seller.deliveryPrice}}</span>
          <span>元</span>
        </div>
        <div>
          <span>平均配送时间</span>
          <span>39</span>
          <span>分钟</span>
        </div>
      </div>
    </div>
    <div class="notive">
      <span>公告与活动</span>
      <p>{{seller.bulletin}}</p>
      <ul>
        <li>
          <img src="./img/decrease_2@2x.png" alt="">
          Lorem ipsum dolor sit amet.
        </li>
        <li>
          <img src="./img/decrease_2@2x.png" alt="">
          Lorem ipsum dolor sit amet.
        </li>
        <li>
          <img src="./img/decrease_2@2x.png" alt="">
          Lorem ipsum dolor sit amet.
        </li>
        <li>
          <img src="./img/decrease_2@2x.png" alt="">
          Lorem ipsum dolor sit amet.
        </li>
        <li>
          <img src="./img/decrease_2@2x.png" alt="">
          Lorem ipsum dolor sit amet.
        </li>
        <li>
          <img src="./img/decrease_2@2x.png" alt="">
          Lorem ipsum dolor sit amet.
        </li>
        <li>
          <img src="./img/decrease_2@2x.png" alt="">
          Lorem ipsum dolor sit amet.
        </li>
      </ul>
    </div>
    <div class="merchants-live">
      <span>商家实景</span>
      <div>
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
      </div>
    </div>
    <div class="details">
      <span>商家信息</span>
      <ul>
        <li>Lorem, ipsum dolor sit amet consectetur adipisicing.</li>
        <li>Lorem, ipsum dolor sit amet consectetur adipisicing.</li>
        <li>Lorem, ipsum dolor sit amet consectetur adipisicing.</li>
        <li>Lorem, ipsum dolor sit amet consectetur adipisicing.</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  name: "Merchants",
  methods: {
    getSellerList(){
      this.$store.dispatch("getSellerList")
    }
  },
  mounted(){
    this.getSellerList()
  },
  computed: {
    ...mapGetters(["seller"])
  },
  components: {},
};
</script>
<style lang="less"scoped>
.head{
  border-bottom: 1px solid rgba(7,17,27);
  padding: 0 36px;
  & > :nth-child(1){
    position: relative;
    border-bottom: 1px solid rgba(7,17,27,0.1);
    padding: 36px 0;
    & > :nth-child(1){
      font-size:28px;
      line-height:28px;
      color:rgb(7,17,27);
    }
    & > :nth-child(2){
      margin-top: 16px ;
      & > :nth-child(6){
        font-size:20px;
        color:rgb(77,85,93);
        line-height:36px
      }
      & > :nth-child(7){
        font-size:20px;
        color:rgb(77,85,93);
        line-height:36px
      }
    }
    & > :nth-child(3){
      position:absolute;
      right:0;
      bottom:36px;
      & > :nth-child(1){
        display: inline-block;
        margin-left: 10px;
        font-size:48px;
        color:rgb(240,20,20);
        line-height:48px;
        text-align: center;
      }
      & > :nth-child(2){
        display: block;
        margin-top:8px;
      }
    }
  }
  //two
  & > :nth-child(2){
    padding:36px 0;
    display: flex;
    justify-content: space-around;
    & > :nth-child(2){
      border-left:1px solid rgba(7,17,27,0.1);
      border-right:1px solid rgba(7,17,27,0.1);
      padding:0 65px;
    }
    div{
      text-align: center;
      & > :nth-child(1){
        display:block;
        font-size:20px;
        color:rgb(147,153,159);
        line-height:20px;
        margin-bottom:8px;
      }
      & > :nth-child(2){
        font-size:48px;
        font-weight:200;
        color:rgb(7,17,27);
        line-height:48px;
      }
      & > :nth-child(3){
        font-size:20px;
        font-weight:200;
        color:rgb(7,17,27);
        line-height:48px;
      }
    }
  }
}
//two
.notive{
  border-top:1px solid rgba(7,17,27);
  border-bottom:1px solid rgba(7,17,27);
  padding:36px;
  margin-top: 36px;
  span{
    display:block;
    margin-bottom: 16px;
    font-size:28px;
    line-height:28px;
    color:rgb(7,17,27);

  }
  p{
    margin:0 24px;
    font-size:24px;
    font-weight:200px;
    color:rgb(240,20,20);
    line-height:48px;
    
  }
  ul{
    margin-top:32px;
    li{
      border-top:1px solid rgba(7,17,27,0.1);
      padding:32px 24px;
      img{
        width: 32px;
        height: 32px;
        margin-right: 12px;
        vertical-align: middle;
      }
      span{
        font-size:24px;
        font-weight:200;
        line-height:32px;
        color: rgb(7,17,27);
         vertical-align: middle;
      }
    }

  }
}
//three 
.merchants-live{
  margin-top: 36px;
  border-top:1px solid rgba(7,17,27);
  border-bottom:1px solid rgba(7,17,27);
  padding:36px 0 36px 36px ;
  white-space: nowrap;
  overflow: hidden;
  span{
    display:block;
    margin-bottom: 24px;
    font-size:28px;
    line-height:28px;
    color:rgb(7,17,27);
  }
  img{
    width:210px;
    height:180px;
    margin: 12px;
  }
}
//four
.details{
  margin-top: 36px;
  border-top:1px solid rgba(7,17,27);
  border-bottom:1px solid rgba(7,17,27);
  padding:36px ;
  span{
    display:block;
    margin-bottom: 24px;
    font-size:28px;
    line-height:28px;
    color:rgb(7,17,27);
  }
  ul{
    li{
      border-top:1px solid rgba(7,17,27,.1);
      padding:32px 24px;
      font-size:24px;
      line-height:24px;
      font-weight:200;
      color:rgb(7,17,27);
    }
  }

}
</style>